<template>
  <div>
    <!-- 人员列表 -->
    <!-- 搜索  -->
    <div class="flex justify-content">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item>
          <el-select
            v-model="formInline.value"
            clearable
            placeholder="请选择部门"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入内容"
            v-model="formInline.region"
          >
            <el-button
              slot="append"
              type="primary"
            >搜索</el-button>
          </el-input>
        </el-form-item>
        <el-form-item>

        </el-form-item>
      </el-form>

      <div>
        <el-button type="primary">新增人员</el-button>
        <el-button>导出</el-button>
      </div>
    </div>
    <!-- @current-change="handleCurrentChange" -->
    <!-- 表格 -->
    <div>
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
        :header-cell-style="{
           'backgroundColor':'#eff4ff' 
            }"
        :max-height="maxheight"
      >
        <el-table-column
          type="index"
          width="50"
          label="序号"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="date"
          label="人员名称"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="name"
          label="工作部门"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="address"
          label="岗位/职务"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="address"
          align="center"
          label="专业技术职务"
        >
        </el-table-column>
        <el-table-column
          min-width="100px"
          align="center"
          property="address"
          label="是否参加岗位培训和考试"
        >
        </el-table-column>
        <el-table-column
          property="address"
          label="岗位资格证号"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="address"
          label="证书照片"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="address"
          label="审核时间"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="address"
          label="审核人"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="address"
          label="备注"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <a
            href="javascript:void(0)"
            style="color:#1455F0"
          >编辑</a>
          &nbsp;
          <a
            href="javascript:void(0)"
            style="color:#1455F0"
          >删除</a>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="footerPagontion">
      <Pagination
        :total="12"
        @pagination="pagination"
      ></Pagination>
    </div>
  </div>
</template>

<script>
import ResizeMixin from '@/layout/mixin/ResizeHandler'
import Pagination from "@/components/Pagination/index"

export default {
  mixins: [ResizeMixin],
  name: 'personnelList',
  components: {
    Pagination

  },
  data() {
    return {
      formInline: {
        value: '',
        region: ''
      },
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区'
        }
      ],
      currentRow: null,
      maxheight: window.innerHeight - 220, //表格动态高度
      pageDate: {
        pageSize: 10,
        pageContent: 1
      }
    };
  },

  mounted() {
    //监听表格高度
    this.$_tableOnresize()

  },
  activated() {

  },
  methods: {
    //模拟请求数据
    getList() {
      if (this.pageDate.pageContent == 1) {
        this.tableData = [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区'
        }]
      }
      if (this.pageDate.pageContent == 2) {
        let arrList = [{
          date: '2016-05-02',
          name: '张三',
          address: '合肥瑶海区'
        }, {
          date: '2016-05-02',
          name: '张三',
          address: '合肥瑶海区'
        }, {
          date: '2016-05-02',
          name: '张三',
          address: '合肥瑶海区'
        }, {
          date: '2016-05-02',
          name: '张三',
          address: '合肥瑶海区'
        },]
        this.tableData = arrList
      }
    },
    //监听分页
    pagination(val) {
      console.log(val);
      this.pageDate.pageSize = val.limit
      this.pageDate.pageContent = val.page
      this.getList()
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-input-group__append {
  background-color: #1455f0;
  color: #fff;
  border: none;
}
</style>
